<script setup>
import { ref } from "vue";

// 定义响应式数据
const username = ref("");
const password = ref("");

// 接收自定义事件
const emits = defineEmits(["login"])

// 定义方法，执行自定义事件，传输用户名和密码
function clickFn(){
    emits("login", username.value, password.value)
}

</script>

<template>
    <div class="loginBox">

        <div class="loginContent">
            <h2>千锋会议室管理系统</h2>
            <el-input v-model="username" class="input" placeholder="Please input" clearable /><br>
            <el-input v-model="password" class="input" type="password" placeholder="Please input password" show-password /><br>
            <el-button class="login" type="success" @click="clickFn">登录</el-button>
            <p>千锋内部系统，如需使用请联系管理员获取账号</p>
        </div>

    </div>
</template>

<style scoped>
.loginBox{
    background:#efefef;
    position:fixed;
    left:0;top:0;right:0;bottom:0;
}
.loginContent{
    width:300px;
    padding:20px;
    border-radius:10px;
    position:fixed;
    height:250px;
    left:0;top:0;right:0;bottom:0;
    margin:auto;
    background:#fff;
}

.loginContent h2{
    text-align:center;
    margin-bottom:10px;
}

.loginContent .input{
    margin:10px 0;
}

.loginContent p{
    font-size:12px;
    color:#aaa;
    margin:10px 0;
}
.loginContent .login{
    width:100%;
    margin: 0 auto;
}
</style>